<template>
    <div class="wrap">
        <div class="flex_wrap" style="justify-content: center;border:1px solid #f2f2f2;padding:0.4rem 0">
            <!-- <mt-button type="default" @click="thisWeek"  size="small" >本周</mt-button> -->
            <input class="date_pick" style="margin:0px 0.3rem" v-for="(student,index) in useInfo.studentList" v-if="student.checked" v-model="student.studentName" readonly  />
            <input class="date_pick" style="margin:0px 0.3rem" @click="openPicker" v-model="searchDate" readonly  />
            <!-- <mt-button type="default" @click="thisMonth"  size="small" >本月</mt-button> -->
        </div>
        
        <schart :canvasId="schartOption.canvasId"
            :type="schartOption.type"
            :width="schartOption.width"
            :height="schartOption.height"
            :data="schartOption.data"
            :options="schartOption.options"
        ></schart>
        <div v-for="(item,index) in showData">
            <div class="bar"></div>
            <div class="flex_column test_row">
            <div style="color:#058cff;margin-bottom:0.2733rem">{{new Date(item.createTime).Format('MM')}}月</div>
            <div v-if="healthType==2">
            <span>身高:{{item.height}}cm  &nbsp; 体重:{{item.weight}}kg </span>
            </div>
            <div v-if="healthType==3">
            <span>左眼:{{item.leftSight/10}} &nbsp;  右眼:{{item.rightSight/10}} </span>
            </div>
            </div>
        </div>
        <mt-datetime-picker v-model='dateFromDate' class="no_date no_month" ref="fromDatepicker" type="date" year-format="{value} 年" month-format="{value} 月"
        date-format="{value}" @confirm="sureYear(dateFromDate)" :endDate='new Date()'>
        </mt-datetime-picker>
    </div>
</template>
<script>
    import Schart from 'vue-schart';
    export default {
        data() {
            return {
                schartOption: {
                    canvasId: 'myCanvas',
                    type: 'bar',
                    width: '',
                    health: '',
                    data: [],
                    options: {
                        title: ''
                    },
                },
                useInfo: '',
                url: '',
                showData: [],
                dateFromDate: new Date(), //过度用日期,无实际作用
                searchDate: new Date().Format('yyyy'),
            }
        },
        props: ['healthType', 'show'],
        components: {
            Schart
        },
        watch: {
            show(newValue) {
                if (newValue) {
                    this.getList();
                }
            }
        },
        methods: {

            getUserInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
                this.useInfo.studentList.forEach(o => {
                    if (o.checked) {
                        this.studentId = o.studentId;
                    }
                })
            },
            //打开时间选择弹窗
            openPicker() {
                this.$refs.fromDatepicker.open();
            },
            //改变年份
            sureYear(dateFromDate) {
                this.searchDate = new Date(dateFromDate).Format('yyyy');
            },
            getList() {
                var params = {
                    userId: this.useInfo.userId,
                    markTime: this.searchDate + '-01-01',
                    schoolId: this.useInfo.schoolId,
                    markSort: this.markSort,
                    healthType: this.healthType,
                    studentId: this.studentId,
                    createTime: this.searchDate + '-01-01',
                }
                if (this.healthType == 2 || this.healthType == 3) {
                    this.url = 'health/selectHelrList';
                }
                this.$api.post(this.url, params, data => {
                    this.showData = data.info;
                    if (this.healthType == 3) {
                        this.schartOption = {
                            canvasId: 'myCanvas',
                            type: 'line',
                            height: 300,
                            width: screen.width,
                            data: [],
                            options: {
                                padding: 30,
                                title: '',
                                yEqual: 10,
                            },
                        };
                        this.schartOption.data = this.showData.map(o => {
                            let obj = {
                                name: new Date(o.createTime).Format('MM'),
                                value: (o.leftSight + o.rightSight) / 20,
                            }
                            return obj;
                        })
                    }
                })
            },
        },
        created() {
            this.getUserInfo();
            // this.getList();
        }
    }
</script>
</script>d